<template>
  <div class="ai-learning-container">
    <div class="header">
      <h1>AI 学习中心</h1>
      <div class="header-actions">
        <el-button type="primary" @click="startNewCourse">开始新课程</el-button>
        <el-button @click="viewProgress">学习进度</el-button>
        <el-button type="success" @click="openAIAssistant">
          <el-icon><ChatDotRound /></el-icon>
          AI助手
        </el-button>
      </div>
    </div>

    <div class="main-content">
      <div class="sidebar">
        <el-menu
          :default-active="activeMenu"
          class="sidebar-menu"
          @select="handleMenuSelect"
        >
          <el-menu-item index="courses">
            <el-icon><Reading /></el-icon>
            <span>课程列表</span>
          </el-menu-item>
          <el-menu-item index="progress">
            <el-icon><DataLine /></el-icon>
            <span>学习进度</span>
          </el-menu-item>
          <el-menu-item index="resources">
            <el-icon><Collection /></el-icon>
            <span>学习资源</span>
          </el-menu-item>
          <el-menu-item index="practice">
            <el-icon><Edit /></el-icon>
            <span>练习区</span>
          </el-menu-item>
          <el-menu-item index="community">
            <el-icon><User /></el-icon>
            <span>学习社区</span>
          </el-menu-item>
          <el-menu-item index="career-paths">
            <el-icon><Connection /></el-icon>
            <span>职业发展</span>
          </el-menu-item>
          <el-menu-item index="career-planner">
            <el-icon><Guide /></el-icon>
            <span>职业规划</span>
          </el-menu-item>
          <el-menu-item index="interview">
            <el-icon><ChatLineRound /></el-icon>
            <span>面试模拟</span>
          </el-menu-item>
        </el-menu>
      </div>

      <div class="content-area">
        <div v-if="activeMenu === 'courses'" class="courses-section">
          <CourseList @start-course="startCourse" />
        </div>

        <div v-if="activeMenu === 'progress'" class="progress-section">
          <el-progress type="dashboard" :percentage="overallProgress" />
          <div class="progress-details">
            <h3>学习统计</h3>
            <el-descriptions :column="2" border>
              <el-descriptions-item label="已完成课程">{{ completedCourses }}/{{ totalCourses }}</el-descriptions-item>
              <el-descriptions-item label="学习时长">{{ totalHours }}小时</el-descriptions-item>
              <el-descriptions-item label="获得证书">{{ certificates }}个</el-descriptions-item>
              <el-descriptions-item label="连续学习">{{ streakDays }}天</el-descriptions-item>
            </el-descriptions>
          </div>
        </div>

        <div v-if="activeMenu === 'course-detail'" class="course-detail-section">
          <CourseDetail />
        </div>

        <div v-if="activeMenu === 'practice'" class="practice-section">
          <PracticeArea />
        </div>

        <div v-if="activeMenu === 'resources'" class="resources-section">
          <LearningResources />
        </div>

        <div v-if="activeMenu === 'community'" class="community-section">
          <LearningCommunity />
        </div>

        <div v-if="activeMenu === 'career-paths'" class="career-paths-section">
          <el-row :gutter="20">
            <el-col :span="8" v-for="path in careerPaths" :key="path.id">
              <el-card class="career-path-card" :body-style="{ padding: '0px' }">
                <img :src="path.cover" class="career-path-image">
                <div class="career-path-info">
                  <h3>{{ path.title }}</h3>
                  <p>{{ path.description }}</p>
                  <div class="career-path-meta">
                    <span><el-icon><Clock /></el-icon> {{ path.duration }}</span>
                    <span><el-icon><User /></el-icon> {{ path.students }}人学习</span>
                  </div>
                  <div class="career-path-levels">
                    <el-steps :active="1" finish-status="success">
                      <el-step v-for="level in path.levels" :key="level.id" :title="level.title" />
                    </el-steps>
                  </div>
                  <el-button type="primary" @click="startCareerPath(path.id)">开始学习</el-button>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>

        <div v-if="activeMenu === 'career-planner'" class="career-planner-section">
          <CareerPlanner />
        </div>

        <div v-if="activeMenu === 'interview'" class="interview-section">
          <InterviewSimulator />
        </div>
      </div>
    </div>

    <!-- AI助手对话框 -->
    <el-dialog
      v-model="aiAssistantVisible"
      title="AI学习助手"
      width="50%"
    >
      <div class="ai-assistant">
        <div class="chat-messages" ref="chatMessages">
          <div v-for="(message, index) in chatMessages" :key="index" 
               :class="['message', message.type]">
            {{ message.content }}
          </div>
        </div>
        <div class="chat-input">
          <el-input
            v-model="userInput"
            placeholder="输入你的问题..."
            @keyup.enter="sendMessage"
          >
            <template #append>
              <el-button @click="sendMessage">发送</el-button>
            </template>
          </el-input>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { 
  ChatDotRound, 
  Reading, 
  DataLine, 
  Folder, 
  Edit, 
  User,
  Clock,
  View,
  Connection,
  Guide,
  ChatLineRound,
  Collection
} from '@element-plus/icons-vue'
import CourseDetail from './components/CourseDetail.vue'
import CareerPlanner from './components/CareerPlanner.vue'
import InterviewSimulator from './components/InterviewSimulator.vue'
import LearningResources from './components/LearningResources.vue'
import PracticeArea from './components/PracticeArea.vue'
import LearningCommunity from './components/LearningCommunity.vue'
import CourseList from './components/CourseList.vue'

const activeMenu = ref('courses')
const aiAssistantVisible = ref(false)
const userInput = ref('')
const chatMessages = ref([])



// 学习进度数据
const overallProgress = ref(35)
const completedCourses = ref(2)
const totalCourses = ref(10)
const totalHours = ref(15)
const certificates = ref(1)
const streakDays = ref(7)

// 职业发展路径数据
const careerPaths = ref([
  {
    id: 1,
    title: '前端工程师',
    description: '从零开始学习前端开发，掌握HTML、CSS、JavaScript等核心技术，成为专业的前端工程师。',
    cover: 'https://placeholder.com/300x200',
    duration: '6个月',
    students: 2345,
    levels: [
      { id: 1, title: '前端基础' },
      { id: 2, title: '框架应用' },
      { id: 3, title: '工程化' },
      { id: 4, title: '高级特性' }
    ]
  },
  {
    id: 2,
    title: '软件架构师',
    description: '系统架构设计、微服务、分布式系统等高级技术，培养架构思维和系统设计能力。',
    cover: 'https://placeholder.com/300x200',
    duration: '12个月',
    students: 1567,
    levels: [
      { id: 1, title: '基础架构' },
      { id: 2, title: '系统设计' },
      { id: 3, title: '性能优化' },
      { id: 4, title: '架构实践' }
    ]
  },
  {
    id: 3,
    title: 'AI工程师',
    description: '机器学习、深度学习、自然语言处理等AI核心技术，打造智能应用。',
    cover: 'https://placeholder.com/300x200',
    duration: '8个月',
    students: 1890,
    levels: [
      { id: 1, title: 'AI基础' },
      { id: 2, title: '机器学习' },
      { id: 3, title: '深度学习' },
      { id: 4, title: '项目实战' }
    ]
  }
])

const handleMenuSelect = (index) => {
  activeMenu.value = index
}

const startNewCourse = () => {
  // 实现开始新课程的逻辑
}

const viewProgress = () => {
  activeMenu.value = 'progress'
}

const openAIAssistant = () => {
  aiAssistantVisible.value = true
}

const startCourse = (courseId) => {
  activeMenu.value = 'course-detail'
  // 这里可以添加获取课程详情的逻辑
}

const startCareerPath = (pathId) => {
  activeMenu.value = 'course-detail'
  // 这里可以添加获取职业发展路径详情的逻辑
}

const sendMessage = () => {
  if (!userInput.value.trim()) return
  
  // 添加用户消息
  chatMessages.value.push({
    type: 'user',
    content: userInput.value
  })
  
  // 模拟AI回复
  setTimeout(() => {
    chatMessages.value.push({
      type: 'assistant',
      content: '这是一个模拟的AI助手回复。在实际应用中，这里应该调用后端API获取真实的AI响应。'
    })
  }, 1000)
  
  userInput.value = ''
}

onMounted(() => {
  // 初始化数据
})
</script>

<style scoped>
.ai-learning-container {
  padding: 20px;
  height: 100%;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.main-content {
  display: flex;
  gap: 20px;
  height: calc(100vh - 120px);
}

.sidebar {
  width: 200px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.content-area {
  flex: 1;
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  overflow-y: auto;
}

.course-card {
  margin-bottom: 20px;
  transition: transform 0.3s;
}

.course-card:hover {
  transform: translateY(-5px);
}

.course-image {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.course-info {
  padding: 14px;
}

.course-meta {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
  color: #666;
}

.progress-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.progress-details {
  width: 100%;
  max-width: 600px;
}

.ai-assistant {
  height: 400px;
  display: flex;
  flex-direction: column;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  background: #f5f7fa;
  border-radius: 4px;
  margin-bottom: 10px;
}

.message {
  margin: 10px 0;
  padding: 10px;
  border-radius: 4px;
  max-width: 80%;
}

.message.user {
  background: #e6f1fc;
  margin-left: auto;
}

.message.assistant {
  background: #fff;
  margin-right: auto;
}

.chat-input {
  padding: 10px 0;
}

.career-path-card {
  margin-bottom: 20px;
  transition: transform 0.3s;
}

.career-path-card:hover {
  transform: translateY(-5px);
}

.career-path-image {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.career-path-info {
  padding: 14px;
}

.career-path-meta {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
  color: #666;
}

.career-path-levels {
  margin: 15px 0;
}

.career-planner-section {
  margin-top: 20px;
}

.interview-section {
  margin-top: 20px;
}

.community-section {
  margin-top: 20px;
}
</style>
